{% extends "base_generic.html" %}

{% block content %}
  <div class="container" data-aos="fade-up">
    <header class="mb-5">
      <h1 class="display-5 fw-bold mb-3">
        <i class="fas fa-book-open text-primary me-3"></i>图书目录
      </h1>
      <p class="lead">浏览我们丰富的图书收藏，找到您喜爱的读物</p>
    </header>
    
    <!-- 过滤器 -->
    <div class="card mb-4">
      <div class="card-body">
        <form class="row g-3">
          <div class="col-md-4">
            <label for="genre-filter" class="form-label">类别</label>
            <select class="form-select" id="genre-filter">
              <option selected>所有类别</option>
              <option>文学小说</option>
              <option>科学技术</option>
              <option>历史文化</option>
              <option>艺术设计</option>
            </select>
          </div>
          <div class="col-md-4">
            <label for="sort-by" class="form-label">排序方式</label>
            <select class="form-select" id="sort-by">
              <option selected>默认排序</option>
              <option>评分最高</option>
              <option>最新上架</option>
              <option>借阅最多</option>
            </select>
          </div>
          <div class="col-md-4 d-flex align-items-end">
            <button type="submit" class="btn btn-primary w-100">
              <i class="fas fa-filter me-2"></i>应用筛选
            </button>
          </div>
        </form>
      </div>
    </div>

    {% if book_list %}
      <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
        {% for book in book_list %}
          <div class="col" data-aos="fade-up" data-aos-delay="{{ forloop.counter|add:'100' }}">
            <div class="card h-100 book-card">
              <div class="card-body">
                <h5 class="card-title">
                  <a href="{{ book.get_absolute_url }}" class="text-decoration-none">{{ book.title }}</a>
                </h5>
                <h6 class="card-subtitle mb-2 text-muted">{{ book.author }}</h6>
                
                <!-- 评分 -->
                <div class="mb-2">
                  <div class="rating">
                    {% for i in "12345" %}
                      {% if forloop.counter <= book.average_rating|floatformat:"0" %}
                        <i class="fa fa-star"></i>
                      {% elif forloop.counter <= book.average_rating|add:"0.5"|floatformat:"0" %}
                        <i class="fa fa-star-half-alt"></i>
                      {% else %}
                        <i class="fa fa-star text-muted"></i>
                      {% endif %}
                    {% endfor %}
                    <span class="ms-2 small">
                      {{ book.average_rating|floatformat:1 }} ({{ book.rating_count }} 评分)
                    </span>
                  </div>
                </div>
                
                <!-- 类别标签 -->
                <div class="mb-3">
                  {% for genre in book.genre.all %}
                    <span class="badge bg-light text-dark me-1">{{ genre.name }}</span>
                  {% endfor %}
                </div>
                
                <p class="card-text">{{ book.summary|truncatechars:120 }}</p>
              </div>
              <div class="card-footer bg-white d-flex justify-content-between align-items-center">
                <span class="text-muted small">
                  <i class="fas fa-thumbs-up me-1"></i> {{ book.likes }} 人点赞
                </span>
                <a href="{{ book.get_absolute_url }}" class="btn btn-sm btn-outline-primary">
                  <i class="fas fa-info-circle me-1"></i> 详情
                </a>
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
      
      <!-- 分页 -->
      {% if is_paginated %}
        <nav aria-label="分页导航" class="mt-4">
          <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}
              <li class="page-item">
                <a class="page-link" href="?page=1">&laquo; 首页</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}">上一页</a>
              </li>
            {% endif %}
            
            {% for i in paginator.page_range %}
              {% if page_obj.number == i %}
                <li class="page-item active">
                  <span class="page-link">{{ i }} <span class="sr-only">(当前页)</span></span>
                </li>
              {% elif i > page_obj.number|add:'-3' and i < page_obj.number|add:'3' %}
                <li class="page-item">
                  <a class="page-link" href="?page={{ i }}">{{ i }}</a>
                </li>
              {% endif %}
            {% endfor %}
            
            {% if page_obj.has_next %}
              <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}">下一页</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="?page={{ paginator.num_pages }}">末页 &raquo;</a>
              </li>
            {% endif %}
          </ul>
        </nav>
      {% endif %}
      
    {% else %}
      <div class="alert alert-info text-center p-5" role="alert">
        <i class="fas fa-info-circle fa-3x mb-3"></i>
        <h4 class="alert-heading">暂无图书</h4>
        <p>图书馆目前没有任何书籍。请稍后再来查看。</p>
      </div>
    {% endif %}
  </div>
{% endblock %}
